<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>响应式设计：视频 音频的使用</title>
		<style type="text/css">
			.box {
				width: 700px;
				height: 400px;
				border: 1px solid !important;
			}
			
			.box video {
				/*宽度100% 占满父盒子的大小*/
				width: 100%;
				/*如果 max-width 属性设置为 100%, 视频播放器会根据屏幕自动调整比例，但不会超过其原始大小*/
				/*max-width: 100%;*/
				height: auto;
				
			}
			
			.v02 {
				width: 100%;
				height: auto;
			}
			
		</style>
	</head>
	<body>
		<div class="box">
			<!--src: 视频路径;  controls: 控制条;  loop：循环播放;  autoplay: 自动播放-->
			<video src="../img/video_01.mp4" controls="controls" autoplay="autoplay" loop="loop"></video>
		</div>
		
		<br /><br /><br />
		
		<audio src="../img/audio_01.ogg" controls="controls" autoplay="autoplay" loop="loop"></audio>
		
	</body>
</html>
